<!--sidebar-menu-->
<div id="sidebar" class="clearfix"><!-- <a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a> -->
  <ul style="display: block;">
  {% include "common/menu.html" %}
  </ul>
</div>
<!--end sidebar-menu-->

<div id="content">
  
    <div class="container-fluid" style="padding: 0;">
      <div class="widget-box tab-tabs" >
          <div class="widget-title">
            <ul class="nav nav-tabs">
                {% include "common/tab.html" %}
                <!--<li class="active"><a href="/settle">申请结算</a></li>
                <li><a  href="/settle/waitsettle">待结算<span id="tirCount" class="tir">2</span></a></li>
                <li><a  href="/settle/settled">已结算</a></li>
                <li><a  href="/settle/settleremind">结算提醒</a></li>-->
            </ul>
          </div>
          <div class="widget-content tab-content">
            <div  class="tab-pane active">
              <div class="container-fluid">
                <div class="row-fluid font20" style="margin: 20px 0;overflow: hidden;">
                  <div class="applyProgress clearfix">
                      <div class="applyProgress1 pull-left"><span class="num">1</span><span class="_num active">选择结算对象</span></div>
                      <div class="applyProgress2 pull-left"><span class="num">2</span><span class="_num">选择结算方式</span></div>
                      <div class="applyProgress3 pull-left"><span class="num">3</span><span class="_num">申请成功</span></div>
                  </div>
                </div>
                <div id="settlefirstbox1" class="row-fluid" style="display: block;">
                    <div style="width: 60%;float:left; background-color: #ffffff;"class="clearfix">
                        <div class="clearfix">
                            <form id="anchornavaform">
                                <input id="isanchor" type="hidden" name="isFamily" value="0">
                                <ul class="nav nav-tabs">
                                    <li class="active" isFamily="0"><a data-toggle="tab" href="#tab6">主播</a></li>
                                    <li  isFamily="1"><a data-toggle="tab" href="#tab6">家族</a></li>
                                </ul>
                            </form>
                        </div>

                        <div class="widget-content tab-content clearfix" style="border-bottom: 0;padding-bottom: 0px;">
                            <div id="tab6" class="tab-pane active">
                                <form id="excAnchorfrom">
                                    <div style="float: right;top: 180px;right: 43%;position: absolute;">
                                    <span class="find-search pull-right">
                                          <i class="icon-search icon-on-right bigger-110"></i>
                                          <input id="_serchName" name="name" type="text" placeholder="用户名(uid)或昵称">
                                          <button id="btn_find"  type="button" class="btn btn-purple">搜索</button>
                                    </span>
                                    </div>
                                    <ul id="excAnchorList" class="exc-anchor clearfix" >

                                    </ul>

                                    <div class="row-fluid">
                                        <div id="pagination" class="pagination alternate pull-right">

                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                    <div style="background-color: #f2f2f2;width: 40%;float: left">
                        <div style="margin: 30px 0 30px 20px;font-size: 14px;">已选(<span id="getanchorlistcount">0</span>)：</div>
                        <div>
                            <form id="getanchorform">
                                <ul id="getanchorlist" class="exc-anchor clearfix">

                                </ul>
                                <div class="row-fluid" style="text-align: center;margin-bottom: 20px;">
                                    <!--<button id="btn_applysellte"  type="button" class="btn btn-purple" style="margin-right: 20px" onclick="addtExcAnchor()">申请结算</button>-->
                                    <button type="button" class="btn btn-purple" onclick="settleFirst()">确定</button>
                                    <button id="btn_clearapply"  type="button" class="btn btn-purple" onclick="removeEmpty()">清空</button>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
                <div  id="settlefirstbox2" class="row-fluid" style="display: none;">
                    <div class="content-box" style="background: #FFF; text-align: left; margin-top:20px;  padding-bottom: 40px;">
                        <ul class="tab-nav clearfix">
                            <li class="tabs-nav active"><a href="#box1">主播</a></li>
                            <li id="familybox" class="tabs-nav"><a href="#box2">家族</a></li>
                        </ul>
                        <div class="hr-d7"></div>

                        <div id="box1" class="box-pane" style="margin: 0px 25px 10px 25px;">
                            <table id="tableList1"  class="table with-check table-purple">
                                <thead>
                                <tr>
                                    <th>uid</th>
                                    <th>昵称</th>
                                    <th>收益（聊币）</th>
                                    <th>底薪方式</th>
                                    <th>底薪（元）</th>
                                    <th>结算方式</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                        <div id="box2" class="box-pane clearfix" style="margin: 0px 25px 10px 25px;display: none">
                            <div id="familyData" class="pull-left" style="margin-left: -25px;background-color: #f2f2f2;width: 82px;border: 0px solid transparent;">
                                <!--<div class="th-header settleSecond active clearfix" onclick="getFamilyData()">-->
                                    <!--<img class="pull-left familyImg"  src="http://q.qlogo.cn/qqapp/101188323/7FC4E28F95C4BE5C9702ED761621D7A7/100">-->
                                    <!--<div class="pull-left familyName">加上对奇偶i</div>-->
                                <!--</div>-->
                                <!--<div class="th-header settleSecond clearfix" onclick="getFamilyData()">-->
                                    <!--<img class="pull-left familyImg"  src="http://q.qlogo.cn/qqapp/101188323/7FC4E28F95C4BE5C9702ED761621D7A7/100">-->
                                    <!--<div class="pull-left familyName">加上对奇偶i</div>-->
                                <!--</div>-->
                            </div>
                            <div id="tableList2"></div>

                        </div>
                        <div class="row-fluid">
                            <div class="total pull-left">
                                <p class="font font18 cr-gy">
                                    <span>记录总数：</span>
                                    <span id="count">0</span>
                                </p>
                            </div>

                            <div id="pagination1" class="pagination alternate pull-right"></div>
                        </div>
                    </div>
                    <div>
                        <button type="button" id="addtExcAnchor" class="btn btn-purple pull-right" style="margin: 10px;" onclick="addtExcAnchor()">申请结算</button>
                        <button type="button" id="addtExcFamily" class="btn btn-purple pull-right" style="margin: 10px;display: none;" onclick="addtExcFamily()">申请结算</button>
                        <button type="button" class="btn btn-purple pull-right" style="margin: 10px;" onclick="settleCancel()">取消结算</button>
                        <button type="button" class="btn btn-purple pull-right" style="margin: 10px;" onclick="lastStep()">上一步</button>
                    </div>
                </div>
                <div id="settlefirstbox3" class="row-fluid" style="display: none;">
                    <div class="settleSuccess" style="width: 300px;height: 150px;margin: 80px auto;">
                        <span class="settleImage">
                            <img src="{{static_url('web/img/91ns/u99.png')}}">
                        </span><br>
                        <span style="font-size: 30px;width: 300px;margin-top: 20px;margin-left:74px;display: inline-block;">结算申请提交成功！</span>
                    </div>
                </div>


              </div>
            </div>
         </div>
        </div>
    
    </div>
            
    
</div>



<script type="text/javascript">

$(function(){
    getExcAnchor();
    tabAnchornava();

    $('.tabs-nav').click(function(){
        $('.tabs-nav.active').removeClass('active');
        $(this).addClass('active');
        var id=$(this).children('a').attr('href');
        $('.box-pane').hide();
        $(id).show();
        return false;
    });
});

function tabAnchornava(){
    $('#anchornavaform .nav li').click(function(){
        var form=global.doc('anchornavaform');
        var isFamily= $(this).attr('isFamily');
        form.isFamily.value=isFamily;
        getExcAnchor();       
    });
}

var btn_find=global.doc('btn_find');
utils.addEvent(btn_find,'click',function(){
    getExcAnchor();
});

function getExcAnchor(index){
    var data={},
            anchornavaform=global.doc('anchornavaform');

    data.isFamily=anchornavaform.isFamily.value;
    data.name=$('#excAnchorfrom')[0].name.value;
    data.page=index||1;
    data.pageSize=12;
    data.ids='';

    $.ajax({
        type:"POST",
        data:data,
        url:'/ajax/getSettleApply',
        dataType:'json',
        success:function(res){

            $('#_serchName').val('');
            var data=res.data;
            var ul=document.getElementById("excAnchorList");
            ul.innerHTML='';

            //$('#getanchorlist').find('li').remove();

            for(var i=0;i<data.list.length;i++){

                var li=document.createElement('li'),
                        div=document.createElement('div')
                li.style.cssText="height:90px;"
                img=document.createElement('img'),
                        div2=document.createElement('div'),
                        div3=document.createElement('div'),
                        input=document.createElement('input');
                input.style.cssText="position: absolute;top:60px;right: 5px;"

                img.className="pull-left";
                img.src=data.list[i].logo;
                img.style.cssText="width:50px; height:50px;border-radius:50%;"
                div.appendChild(img);

                div2.classname="th-h-text pull-left";
                div2.innerHTML='<p><span>主播号:</span><span>'+data.list[i].id+'<input name="isFamily" type="hidden" value="'+data.list[i].isFamily+'"></span></p>' +
                        '<p><span>昵称：</span><span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;max-width: 72px;margin-bottom: -5px;" title="'+data.list[i].name+'">'+data.list[i].name+'</span></p>';
                div3.classname="th-h-text pull-left";
                div3.innerHTML='<p style="color:#837ECE"><span>可结算:</span><span style="margin-left: 5px;">'+data.list[i].money+'</span></p>';
                div3.style.cssText="position: relative;padding: 0 5px;"
                div.appendChild(div2);
                div.appendChild(div3);

                input.type="checkbox";
                input.name="anchorid";
                input.value=data.list[i].id;

                utils.addEvent(input,'click',function(){
                    if(this.checked){
                        var li=$(this).parents('li').clone(true);
                        li.find('input[name="anchorid"]')[0].type='hidden';
                        li.children('.th-header').prepend('<span class="icon-minus-sign" onclick="remodata(this)"></span>');
                        $('#getanchorlist').append(li);
                        var count=$('#getanchorlistcount').text();
                        $('#getanchorlistcount').text(parseInt(count)+1);
                    }else{
                        $('#getanchorlist').find('input[value="'+$(this).val()+'"]').parents('li').remove();
                        var count=$('#getanchorlistcount').text();
                        $('#getanchorlistcount').text(count==0?0:parseInt(count)-1);
                    }
                });
                div.className="th-header clearfix";
                div.appendChild(input);

                li.appendChild(div);
                ul.appendChild(li);
            }
            if(!index||index==0){
                utilsPagination("#pagination",data.count,global.pageSize,function(page_index,jq){
                    getDataList(page_index);
                });
            }
        }
    });
}

function remodata(e){
    var li=$(e).parents('li');
    var inp=li.find('input[name="anchorid"]').val();
    $('#excAnchorList').find('input[value="'+inp+'"]')[0].checked=false;
    li.remove();
    var count=$('#getanchorlistcount').text();
    $('#getanchorlistcount').text(count==0?0:parseInt(count)-1);
}

function removeEmpty(){
    location.reload();

    /*$("#getanchorlist li").each(function(i){
        var li=this;
        var inp=li.find('input[name="anchorid"]').val();
        $('#excAnchorList').find('input[value="'+inp+'"]')[0].checked=false;
        li.remove();
    });*/
}

//主播申请结算
function addtExcAnchor(){

//    var getanchorform=global.doc('getanchorform');
//    var anchorid=$(getanchorform.anchorid);
//    var isFamily=$(getanchorform.isFamily);
    var isFamilys='',ids='',settleTypes='';

    var table=$('#tableList1');
    var tbody=table.children('tbody');
    var rows=tbody.children('tr');

    for(var i=0;i<rows.length;i++) {
        var radio = rows.eq(i).children('td').eq(5).find('input[type=radio]:checked');

        var value = radio.val();
        var uid = radio.attr('name').substring(7);
        settleTypes+=value+',';
        ids+=uid+',';
        isFamilys+=0+',';
    }

    if(ids!=''){
        ids=ids.substring(0,ids.length-1);
    }
    if(settleTypes!=''){
        settleTypes=settleTypes.substring(0,settleTypes.length-1);
    }
    if(isFamilys!=''){
        isFamilys=isFamilys.substring(0,isFamilys.length-1);
    }

    var data={};
    data.ids=ids;
    data.isFamilys=isFamilys;
    data.settleTypes=settleTypes;
    $.ajax({
        type:"POST",
        data:data,
        url:'/ajax/setSettle',
        dataType:'json',
        success:function(res){
            if(res.code==0 && res.info=="操作成功"){
                $('.applyProgress3').addClass('active');
                $('.applyProgress3 .num').addClass('active');
                $('.applyProgress3 ._num').addClass('active');
                $('#settlefirstbox1').hide();
                $('#settlefirstbox2').hide();
                $('#settlefirstbox3').show();
                setTimeout( "location.reload()",3000);
            }
            else{
                alert('结算失败');
            }

//            location.reload();

        }
    });



}

//家族申请结算
function addtExcFamily(){
    var familySettleData=global.familySettleData;
    var familyDatainfo=familySettleData;
    var data={};
    data.familyInfo=familyDatainfo;
    $.ajax({
        type:"POST",
        data:data,
        url:'/ajax/setFamilyAccount',
        dataType:'json',
        success:function(res){
            if(res.code==0 && res.info=="操作成功"){
                $('.applyProgress3').addClass('active');
                $('.applyProgress3 .num').addClass('active');
                $('.applyProgress3 ._num').addClass('active');
                $('#settlefirstbox1').hide();
                $('#settlefirstbox2').hide();
                $('#settlefirstbox3').show();
                setTimeout( "location.reload()",3000);
            }
            else{
                alert('结算失败');
            }
        }
    })
}

//申请结算第一步
function settleFirst(index){

    var getanchorform=global.doc('getanchorform');
    var anchorid=$(getanchorform.anchorid);
    var isFamily=$(getanchorform.isFamily);
    var isFamilys='',ids='';
    for(var i=0;i<anchorid.length;i++){
        ids+=anchorid[i].value+',';
        isFamilys+=isFamily[i].value+',';
    }

    if(isFamilys!=''){
        isFamilys=isFamilys.substring(0,isFamilys.length-1);
    }
    if(ids!=''){
        ids=ids.substring(0,ids.length-1);
    }
    else{
        alert('请选择要结算收益的主播或家族！')
        return false;
    }
    $('#settlefirstbox1').hide();
    $('#settlefirstbox2').show();

    $('.applyProgress2').addClass('active');
    $('.applyProgress2 .num').addClass('active');
    $('.applyProgress2 ._num').addClass('active');

    var f=$('#isanchor').val();
  if(f==0){

      var data={};
      data.uids=ids;
      data.page=index||1;
      data.pageSize=global.pageSize;
      $.ajax({
          type:"POST",
          data:data,
          url:'/ajax/anchorClearingForm',
          dataType:'json',
          success:function(res){
              var data=res.data;
              var tableList=global.doc('tableList1');
              var tbody= tableList.getElementsByTagName('tbody')[0];
              dataTable.clearData(tbody);

              var count=global.doc('count');
              count.innerHTML=data.count;

              for(var i=0;i<data.list.length;i++){
                  addRow(tbody,'',data.list[i]);
              }
              if(!index||index==0){
                  utilsPagination("#pagination1",data.count,global.pageSize,function(page_index,jq){
                      page_index+=1;
                      settleFirst(page_index);
                  });
              }
          }
      });
  }
    else{
      $('#box1').hide();
      $('#box2').show();
      $('#addtExcAnchor').hide();
      $('#addtExcFamily').show();
      $('.tabs-nav.active').removeClass('active');
      $('#familybox').addClass('active');
      getfamilyinfo(ids);

  }

}

//获得家族列表
function getfamilyinfo(ids){
    var data={};
    data.familyIds=ids;
    $.ajax({
        type:"POST",
        data:data,
        url:'/ajax/familyInfo',
        dataType:'json',
        success:function(res){
            var data=res.data;
            var familySettleData = {};
            $('#familyData').html('');

            for(var i=0;i<data.length;i++){
                $("#familyData").append(addfamily(data[i]));
                familySettleData[data[i].id] = null;
                if(i==0){
                    //set data
                    $('#familyData>div').eq(0).click();
                    $('.settleSecond').addClass('active');
                }
            }
            global.familySettleData = familySettleData;
        }
    })
}

function addfamily(data){
    var html='';
    html+='<div class="th-header settleSecond clearfix" onclick="getFamilyData('+data.id+',this)">';
    html+='<img class="pull-left familyImg"  src="'+data.logo+'">';
    html+='<div class="pull-left familyName">'+data.name+'</div></div>';
    return html;
}

function changeType(a){
    var familyId = $(a).attr('familyId');
    var uid = $(a).attr('uid');
    global.familySettleData[familyId][uid] = $(a)[0].value;
}

function addRow(table,index,data,familyId){
    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);
    var cell4=row.insertCell(4);
    var cell5=row.insertCell(5);


    cell.innerHTML='<div class="anchor-info"><img src="'+data.avatar+'">&nbsp;<span>'+data.uid+'</span></div>';
    cell1.innerHTML=data.nickName;
    if(data.income=='null')
    {
        cell2.innerHTML=0;
    }
    else{
        cell2.innerHTML=data.income;
    }
    if(data.type==0){
        cell3.innerHTML='无底薪';
        cell5.innerHTML='<input type="radio" onclick="changeType(this);" familyId="'+familyId+'" uid="'+data.uid+'" name="settle_'+data.uid+'" checked="checked" style="margin-left: 20px;" value="1"> <span>按播出收益</span>';
    }
    if(data.type==1){
        cell3.innerHTML='保底';
        cell5.innerHTML='<input type="radio" onclick="changeType(this);" familyId="'+familyId+'" uid="'+data.uid+'" name="settle_'+data.uid+'" checked="checked" style="margin-left: 20px;" value="1"> <span>按播出收益</span><br>' +
                '<input type="radio" onclick="changeType(this);" familyId="'+familyId+'" uid="'+data.uid+'" name="settle_'+data.uid+'"  style="margin-left: 20px;" value="2"> <span>按播出时长</span>';
    }
    if(data.type==2){
        cell3.innerHTML='固定';
        cell5.innerHTML='<input type="radio" onclick="changeType(this);" familyId="'+familyId+'" uid="'+data.uid+'" name="settle_'+data.uid+'" checked="checked" style="margin-left: 20px;" value="3"><span>收益+时长</span>';
    }
    if(data.type==3){
        cell3.innerHTML='时薪';
        cell5.innerHTML='<input type="radio" onclick="changeType(this);" familyId="'+familyId+'" uid="'+data.uid+'" name="settle_'+data.uid+'" checked="checked" style="margin-left: 20px;" value="2"><span>按播出时长</span>';
    }

    cell4.innerHTML=data.money;


    return row;
}

//获得选中的家族的主播信息
function getFamilyData(id,a,index){
    $('.settleSecond').removeClass('active');
    $(a).addClass('active');

    var clickFamilyDiv = $('#tableList2-'+id);
    if(clickFamilyDiv.length > 0){
        $('#tableList2 table').hide();
        clickFamilyDiv.show();
        return 0;
    }
    var dataObj={};
    dataObj.page=index||1;
    dataObj.familyId=id;
    dataObj.pageSize=global.pageSize;
    $.ajax({
        type:"POST",
        data:dataObj,
        url:'/ajax/familyClearingForm',
        dataType:'json',
        success:function(res){

            var data=res.data;
            var html = '<table id="tableList2-'+dataObj.familyId+'"  style="width: 94%;margin-left: 8px;" class="table with-check table-purple pull-left">';
            html += '<thead>';
            html += '<tr>';
            html += '<th>uid</th>';
            html += '<th>昵称</th>';
            html += '<th>收益（聊币）</th>';
            html += '<th>底薪方式</th>';
            html += '<th>底薪（元）</th>';
            html += '<th>结算方式</th>';
            html += '</tr>';
            html += '</thead>';
            html += '<tbody>';
            html += '</tbody>';
            html += '</table>';
            var tableList=$('#tableList2');
            tableList.find('table').hide();
            tableList.append(html);
            tableList=global.doc('tableList2-'+dataObj.familyId);
            var tbody= tableList.getElementsByTagName('tbody')[0];
            dataTable.clearData(tbody);

            var count=global.doc('count');
            count.innerHTML=data.count;

            var familySettleData = global.familySettleData;
            familySettleData[dataObj.familyId] = {};

            var defaultType = {2:3,3:2};
            for(var i=0;i<data.list.length;i++){
                familySettleData[dataObj.familyId][data.list[i].uid] = 1;
                if(defaultType[data.list[i].type]){//固定
                    familySettleData[dataObj.familyId][data.list[i].uid] = defaultType[data.list[i].type];
                }

                addRow(tbody,'',data.list[i], dataObj.familyId);
            }
            global.familySettleData = familySettleData;
            //getfamilyinfo(id);

            if(!index||index==0){
                utilsPagination("#pagination1",data.count,global.pageSize,function(page_index,jq){
                    page_index+=1;
                    getFamilyData(id,a,page_index);
                });
            }
        }
    });

}

//上一步
function  lastStep(){
    $('#settlefirstbox1').show();
    $('#settlefirstbox2').hide();
    $('.applyProgress2').removeClass('active');
    $('.applyProgress2 .num').removeClass('active');
    $('.applyProgress2 ._num').removeClass('active');
}

//取消结算
function settleCancel(){
    location.href='/settle';
}

</script>